# Personal preferences/opinions:

## `packages/ds-chat/src/ChatDataTestids.tsx`

maybe this could have been a better way to handle the test-id hierarchy?
I personally prefeer this way, but it's just personal preference

```js
export const ChatDataTestIds = {
  COMPOSER: {
    TEXTAREA: 'chat-composer-textarea',
    SEND_BUTTON: 'chat-composer-send-button',
  },
  CARD: {
    TITLE: 'chat-card-title',
    WRAPPER: 'chat-card-wrapper',
    TIME: 'chat-card-time',
    RIGHT_ADDON: 'chat-right-addon',
    CONTENT: 'chat-card-content',
  },
  LOADING_INDICATOR: 'ds-chat-loading-indicator',
  HEADER: {
    TITLE: 'chat-header-title',
    CHILDREN: 'chat-header-children',
  },
  THREAD_CONTAINER: 'chat-thread-container',
  LOAD_MORE_BUTTON: 'ds-chat-load-more-btn',
  FLOATING_BUTTON: 'chat-floating-button',
  SYSTEM_MSG: {
    TITLE: 'chat-system-message-title',
    BODY: 'chat-system-message-body',
    TIME: 'chat-system-message-time',
  },
  BUBBLE: {
    ROOT: 'ds-chat-bubble',
    TITLE: 'chat-bubble-title',
    BODY: 'chat-bubble-body',
  },
  BANNER: 'ds-banner-container',
};
```

# Scaffolding and Semantinc naming

## Generic

the way this component it's structured we don't have a clear "top-to-down" flow, it's hard to even identify the "entry point"

this is due to the fact that this was created with extreme composition in mind, but if we need to follow extreme composition

we should create different packages with each part having it's own "clear top-to-down flow and entry point" instread of squeezing everything here

we could re-arrange this `@elliemea/ds-chat` to become an "aggregator" package, re-exporting the differente pieces as per `@elliemae/ds-controlled-form`

and we could create separate atomic `@elliemae/ds-chat-${composer/container/bubble/card/sidebar...}` packages...

## `packages/ds-chat/src/styled.tsx`

this file contains only constants,
it doesn't even import styled-components...
we should move the content under `packages/ds-chat/src/config/style-constants.tsx` in my opinion

# Typescript related

## `packages/ds-chat/src/react-desc-prop-types.tsx`

the `DSChatT` namespace is exposing both composer props and container props,

this is unexpected we should instead have two different namespaces,

- `DSChatComposerT`
- `DSChatContainerT`

since they are pretty much different components

## `packages/ds-chat/src/exported-related/bubble/props.ts`

must be reviewed, optional props and required options are not clearly defined, if they variate based on the "Type" we should create expected props per type and define props as

```typescript
export type BubblePropsT = SenderBubblePropsT | RecipientBubblePropsT | DelimiterBubblePropsT | SystemBubblePropsT;
```

an example of how to handle polymorphism in typescript can be found at `packages/ds-form-date-time-picker/src/propTypes.tsx` line 50 ~ 137

# Features and dimsum standards

## `packages/ds-chat/src/**/*/styled.tsx`

Theme `slot` feature is not yet implemented

## `packages/ds-chat/src/parts/chat-container-messages-list/ChatContainerMessagesList.tsx`

**339 line** in one file is overdoing it, we should use the `useChatContainerMessageList` custom hook configuring the logic to make the component easier to mantain

I re-factored the code but we need testing that this didn't break anything before releasing it

# Eslint

basically every single file has some sort of eslint error, most of the errors comes from typescript typings.

we need to re-define typings correctly AND document them properly in storybook, right now storybook props are not in sync, some props are missing, some other parts are lying (documentation says receive an array of numbers, we send an array of strings and such...)

I will not list all of these errors because they are present basically everywhere and the fix should be kind of "global" too, as in, fixing typescript typing

I think it's a good idea to fix this Eslint errors only after splitting the chat exported-related into their own packages

# Conclusions

We need to overhaul the code...

The next steps in my opinion are:

- Divide this into sub-packages `@elliemae/ds-chat-${composer/container/bubble/card/sidebar...}`
- Make sure every single sub-packages comply with the "clear top-to-down flow and entry point" good practice + typescript namespace + proper Storybook Schema definitions
- Make every single sub-package eslint-error free
- deploy sub-packages with "typesafe:true" in their package.json configurations

After above steps are taken care of we could fine-detail check the code again